	<template>
		<view class="binding">
			<!-- 绑定公司 -->
			<view class="flex_sa f24 topicons">
				<view class="flex_ac">
					<u-icon size="28" name='https://img.aibbyp.com/wechatUser/craftsman/gs4.png'></u-icon>
					<view class="cf ml8">
						在线选择
					</view>
				</view>
				<view class="flex_ac">
					<u-icon size="28" name='https://img.aibbyp.com/wechatUser/craftsman/gs3.png'></u-icon>
					<view class="cf ml8">
						专业工匠
					</view>
				</view>
				<view class="flex_ac">
					<u-icon size="28" name='https://img.aibbyp.com/wechatUser/craftsman/gs1.png'></u-icon>
					<view class="cf ml8">
						人力充足
					</view>
				</view>

				<view class="flex_ac" @tap="popupDescribe = true">
					<u-icon size="28" name='https://img.aibbyp.com/wechatUser/craftsman/sm1.png'></u-icon>
					<view class="cf ml8">
						说明
					</view>
				</view>
			</view>
			<view class="centerTbas mt24">

				<view class="cu-bar ">
					<view class="search-form round">
						<text class="wlIcon-sousuo1 text-bold"></text>
						<input type="text" maxlength="12" confirm-type="search" placeholder-style="color: #ccc"
							placeholder="输入内容（姓名/工种）" v-model="keyword" @confirm="onSearchInputConfirmed"
							@input="onSearchInputChanged" />
						<view class="mr24 primary fb " @click="onSearchInputChanged(keyword,'1')">
							搜索
						</view>

					</view>
					<view class=" flex_y_y_center sqjbBox"
						@click="$wanlshop.to('/pages/craftsman/company/shengqingjiebang')">
						<u-icon label-pos='bottom' label="申请解绑" label-size='24'
							name="https://img.aibbyp.com/wechatUser/craftsman/sqjb.png" size="54"></u-icon>
						<u-badge class="sqjbi" v-if="count1>0" :count='count1' size="mini" type="error"
							:offset='[-10,24]'></u-badge>
					</view>

				</view>
				<goods-tabs active-color='#3583F0' :list="navTitleList" :is-scroll="true" v-model="tabCurrentIndex"
					name="text_show"></goods-tabs>
			</view>


			<swiper :current="tabCurrentIndex" style="flex: 1;width: 100%;" duration="300" @change="changeTab"
				class="swiperBox">
				<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state">

					<scroll-view style="height: 100%;" class="list-scroll-content" scroll-y @scrolltolower="loadData">
						<!-- 空白页 -->
						<wanl-empty text="没有更多数据了" v-if="tag.loaded === true && tag.list.length === 0" />
						<!-- 订单列表 -->
						<block v-if="tag.list.length > 0">
							<view class="u-p-t-32" v-for="(goods, index) in tag.list" :key="index">
								<!-- 商品选择 -->
								<view class="forbox wanl-cart-goods u-flex-col padding-bj" style="align-items: stretch;">
									<view class="flex_ac"
										@tap="$wanlshop.to('/pages/craftsman/craftsmanHomepage?company=1&id=' + goods.user_id)">
										<image style="width: 132rpx;height: 132rpx;" class="br100"
											:src="$wanlshop.oss(goods.avatar)" mode=""></image>
										<view class="flex1 ml24 minwidth overflow_1">
											<view class="f32 overflow_1 fb">
												{{goods.name}}
												<u-tag class="ml12" :text="goods.work_time + '年'" size="mini" mode="dark"
													type="warning" />
											</view>
											<view class="mt8 flex overflow_1">
												<scroll-view scroll-x="true" style="width: 250rpx;">
													<u-tag class="mr12" :text="i" size="mini" mode="light"
														v-for="(i,k) in goods.work_type_text" :key="k" shape="circle" />
												</scroll-view>
											</view>
											<view class="f24 mt12" v-if="key ==3">
												解绑时间： {{goods.createtime_text}}
											</view>
										</view>
										<view class="" v-if="key == 0">
											<u-button size="mini" class="ml24" type="info" plain=""
												@click='applyfor(goods, index,-1)'>拒绝</u-button>
											<u-button size="mini" class="ml24" type="primary"
												@click='applyfor(goods, index,1)'>同意</u-button>
										</view>
										<view class="f24 error pl20" v-if="key == 2">
											<view class="">
												待工匠同意解绑
											</view>
											<u-button size="mini" class="mt12 ml20" type="primary"
												@click='applyfor1(goods, index,1)'>取消解绑</u-button>
										</view>
										<view class="" v-if="key == 1">
											<u-button size="mini" class="ml24" type="primary"
												@click='applyfor2(goods, index,1)'>解绑</u-button>
										</view>

									</view>

								</view>
							</view>
						</block>
						<uni-load-more :status="tag.loadingType" :content-text="contentText" v-if='tag.list.length != 0' />
						<view class="edgeInsetBottom"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<u-popup v-model="popupDescribe" mode="bottom" border-radius="24">
				<view class="describe">
					<view class="f32 fb">
						说明
					</view>
					<rich-text class="describeHtml" :nodes="describeConcat.content"></rich-text>
					<!-- <view class="describeHtml" v-html="describeConcat"></view> -->
					<view class="describeBtn" @tap="popupDescribe = false">
						知道啦
					</view>
				</view>

			</u-popup>

		</view>
	</template>

	<script>
		export default {
			data() {
				return {
					popupDescribe: false,
					describeConcat: '',
					tabCurrentIndex: 0,
					navList: [{
							state: 0,
							text: '工匠申请',
							text_show: '工匠申请',
							key: 'normal',
							loadingType: 'more',
							current_page: 1,
							list: []
						},
						{
							state: 1,
							text: '我的工匠',
							text_show: '我的工匠',
							key: 'normal',
							loadingType: 'more',
							current_page: 1,
							list: []
						},
						{
							state: 2,
							text: '待解绑',
							text_show: '待解绑',
							key: 'examine',
							loadingType: 'more',
							current_page: 1,
							list: []
						},
						{
							state: 3,
							text: '已解绑',
							text_show: '已解绑',
							key: 'sell_out',
							loadingType: 'more',
							current_page: 1,
							list: []
						},

					],

					navTitleList: [{
							state: 0,
							text: '工匠申请',
							text_show: '工匠申请',
							key: 'normal',
							loadingType: 'more',
							current_page: 1,
							list: []
						},
						{
							state: 1,
							text: '我的工匠',
							text_show: '我的工匠',
							key: 'normal',
							loadingType: 'more',
							current_page: 1,
							list: []
						},
						{
							state: 2,
							text: '待解绑',
							text_show: '待解绑',
							key: 'examine',
							loadingType: 'more',
							current_page: 1,
							list: []
						},
						{
							state: 3,
							text: '已解绑',
							text_show: '已解绑',
							key: 'sell_out',
							loadingType: 'more',
							current_page: 1,
							list: []
						},

					],
					contentText: {
						contentdown: '下拉加载更多',
						contentrefresh: '加载中...',
						contentnomore: '没有更多数据了'
					},
					cart: {
						status: 0,
						allsum: 0,
					},
					keyword: '',
					count1: ''
				}
			},
			onLoad() {
				this.getarticle()
			},
			onShow() {
				this.loadData('search');
				this.getcount()
			},
			methods: {
				getarticle() { //说明
					this.$api.get({
						url: '/wanlshop/article/details?id=13'
					}).then(res => {
						this.describeConcat = res
					})
				},
				getcount() {
					this.$api.get({
						url: '/worker/user_join/getWitUnbindCount',
					}).then(res => {
						console.log(res);
						this.count1 = res
					})
				},
				applyfor(item, key, type) { //同意 拒绝 工匠申请
					let _this = this
					let url, content
					if (type == 1) {
						url = '/worker/user_join/agreeJoin'
						content = `确定同意${item.name}加入公司吗？`
					}
					if (type == -1) {
						url = '/worker/user_join/failJoin'
						content = `确定拒绝${item.name}加入公司吗？`
					}
					uni.showModal({
						title: `提示`,
						content: content,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								_this.$api.post({
									url: url,
									data: {
										user_id: item.user_id,
									},
								}).then(res1 => {
									_this.navList[_this.tabCurrentIndex].list.splice(key, 1)
									uni.showToast({
										icon: 'none',
										title: '操作成功'
									})
								})
							} else if (res.cancel) {}
						}
					});
				},
				applyfor1(item, key, type) { // 公司取消解绑
					let _this = this
					_this.$api.post({
						url: '/worker/user_join/cancelUnbind',
						data: {
							user_id: item.user_id
						},
						success: res1 => {
							_this.navList[_this.tabCurrentIndex].list.splice(key, 1)
							_this.$wanlshop.msg('操作成功')
						}
					})



				},
				applyfor2(item, key, type) { //公司发起解绑
					let content
					if (type == 1) {

						content = `确定解绑${item.name}吗？`
					}
					if (type == -1) {
						content = `确定解绑${item.name}吗？`
					}
					let _this = this
					uni.showModal({
						title: `提示`,
						content: content,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								_this.$api.post({
									url: '/worker/user_join/sendUnBind',
									data: {
										user_id: item.user_id,
									},
								}).then(res1 => {
									_this.loadData('search');
									uni.showToast({
										icon: 'none',
										title: '操作成功'
									})
								})
							}
						}
					});
				},

				onSearchInputChanged(event) {
					let value = event.detail.value;
					if (type) {
						value = event
					}
					if (!value) {
						return;
					} else {
						this.loadData('search');
						uni.hideKeyboard();
					}
				},
				onSearchInputConfirmed(event) {
					let value = event.detail.value;
					if (!value) {
						this.loadData('search');
						uni.hideKeyboard();
					} else {
						uni.showModal({
							title: '提示',
							content: '请输入内容。'
						});
						return;
					}
				},

				myonGoods(id, tag) {
					if (tag.state == 0 || tag.state == 2) {
						this.onGoods(id)
					}
				},
				//获取订单列表
				loadData(source) {
					//这里是将订单挂载到tab列表下

					let index = this.tabCurrentIndex;
					let navItem = this.navList[index];
					let state = navItem.state;
					let status = navItem.key
					console.log('loadData', index, navItem);
					if (source == 'search') {
						navItem.current_page = 1
						navItem.loadingType = 'more'
						navItem.list = []

					}
					//判断是否最后一页
					if (navItem.loadingType == 'noMore') {
						return;
					}

					//tab切换只有第一次需要加载数据
					if (source === 'tabChange' && navItem.loaded === true) {
						return;
					}
					//防止重复加载
					if (navItem.loadingType === 'loading') {
						return;
					}
					navItem.loadingType = 'loading';
					let data = {
						status: status,
						page: navItem.current_page,
					}
					if (this.keyword.length > 0) {
						data['title'] = this.keyword
					}
					let url = '/worker/user_join/getUserWorkerList'
					if (index == 1) {
						url = '/worker/user_join/myUserWorkerList'
					}
					if (index == 2) {
						url = '/worker/user_join/waitUnbind'
						data['type'] = 2
					}
					if (index == 3) {
						url = '/worker/user_join/unBindList'
					}
					// 获取列表
					this.$api.get({
						url: url,
						data: data,
						loadingTip: '加载中...',
						success: res => {
							navItem.current_page = res.current_page; //当前页码
							if (res.last_page === res.current_page) {
								navItem.loadingType = 'noMore';
							} else {
								navItem.loadingType = 'more';
								navItem.current_page++;
							}
							console.log(res);
							let orderList = res.data;
							if (index == 3) {
								orderList = res.list.data
							}
							orderList.forEach(item => {
								navItem.list.push(item);
							});
							//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
							this.$set(navItem, 'loaded', true);
						}
					});
				},

				//swiper 切换
				changeTab(e) {
					this.tabCurrentIndex = e.detail.current
					let index = this.tabCurrentIndex;
					let navItem = this.navList[index];
					navItem.loadingType = 'more'
					navItem.current_page = 1
					navItem.list = []
					this.loadData()


				},


			}

		}
	</script>

	<style lang="scss" scoped>
		.sqjbBox {
			position: relative;

		}

		.binding {
			padding: 44rpx 0;
			width: 100%;
			background-image: url('https://img.aibbyp.com/wechatUser/craftsman/gjsqbac.png');
			background-size: 750rpx 320rpx;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 100vh;
			overflow: scroll;

			.gongshi {
				width: calc(100% - 56rpx);
				background: #fff;
				border-radius: 20rpx;
				padding: 28rpx;
				margin-top: 30rpx;
			}

			.touxiang {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
			}

			.describe {
				padding: 20rpx 32rpx 60rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.describeHtml {
					margin-top: 40rpx;
					width: 100%;
				}

				.describeBtn {
					width: 660rpx;
					height: 80rpx;
					background: #FD5241;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					font-size: 40rpx;
					color: #FFFFFF;
					line-height: 80rpx;
					text-align: center;
					margin-top: 60rpx;
				}
			}

			.topicons {
				width: 100%;
				padding: 0 32rpx;
			}

			.forbox {
				background: #fff;
			}

			.centerTbas {

				width: 100%;
				background: #fff;
				border-radius: 40rpx 40rpx 0 0;
				padding: 40rpx 54rpx 0;
			}
		}
	</style>